<template>
	<view>
		<uni-nav-bar left-icon="back"  :status-bar="true"   fixed="true"  backgroundColor="#ffffff"  @clickLeft="NavBar()">
			<view  class="inputBox flex">
				<view class="input1 flex" > 
					<input maxlength="20" @confirm="toSearch()" v-model="searchValue" class="tac fs21 Cccc" type="text" placeholder="搜索商品名称"  value=""/>
				</view>	
				<view class="eliminate">×</view>
			</view>
		</uni-nav-bar>
		
		<view class="ListBox">
			<view class="List flex" v-for="(item,index) in goodsList" :key="index" @click="chenge(item,index)">
				<image class="shopImg" :src="item.goods_image_url" mode="" style="border-radius: 20rpx;"></image>
				<view class="">
					<view class="goodeName">{{item.goods_name}}</view>
					<view class="brand">￥{{item.goods_price}}</view>
				</view>
				<view class="xzIco">
					<image v-if="chengeList[index]" src="../../static/images/xzIco.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view @click="confirm()" class="confirm">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				goodsList:[],
				chengeList:[],
				goodsID:[],
				curpage:1,
				goodsInfo:[]
			}
		},
		onLoad(){
			this.getList();
		},
		onReachBottom(e) {
			if(this.curpage){
				this.getList(true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		methods: {
			confirm(){//确认选择
			  let goodsIDs = this.goodsID.join(",")
			  uni.setStorageSync("goodsIDs",goodsIDs)
			  uni.setStorageSync("goodsInfo",this.goodsInfo)
			  uni.navigateBack({})
			},
			getList(state){//获取商品列表
				this.$util.request({
					url: '/hao/index.php?act=api-note_publish&op=search_order_goods',
					method: 'get',
					data: {
						keyword:this.searchValue,
						curpage:this.curpage
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(state){
							this.goodsList=this.goodsList.concat(res.datas.goods_list)  
						}else{
							this.goodsList=res.datas.goods_list
						}
						if(res.datas.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
						
						this.goodsList.map((item)=>{
							this.chengeList.push(false)
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			chenge(item,index){
				this.chengeList.splice(index,1,!this.chengeList[index])
				
				if(this.chengeList[index]){
					this.goodsID.push(item.goods_id)
					this.goodsInfo.push(item)
					
				}else{
				let _index = this.goodsID.indexOf(item.goods_id)
					if(_index>-1){
						this.goodsID.splice(_index,1)
						this.goodsInfo.splice(_index,1)
					}
				}
			},
			NavBar() {
				uni.navigateBack({})
			},
			toSearch(){
				this.getList()
			}
		}
	}
</script>

<style>
	.confirm{
		width: 90rpx;
		line-height: 100rpx;
		background-color: red;
		font-weight: bold;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 30rpx;
		color: #FFFFFF;
		z-index: 9999;
		width: 100%;
		text-align: center;
	}
	.List .goodeName{
		font-weight: bold;
		color: #333333;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 480rpx;
		overflow: hidden;
	}
	.xzIco image{
		width:40rpx;
		height: 35rpx;
	}
	.xzIco{
		width:40rpx;
		height: 35rpx;
	}
	.shopImg{
		width: 100rpx;
		height: 100rpx;
	}
	.ListBox{
		margin: 20rpx;
	}
	.ListBox .List{
		padding: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 15rpx;
		background-color: #F8F8F8;
	}
	.eliminate{
		width: 30rpx;
		height: 30rpx;
		background-color:#999999;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
		color: #FFFFFF;
		margin-right: 20rpx;
	}
	.uni-navbar__header-btns{
		width: 50rpx !important;
	}
	.inputBox{
		width:600rpx;
		background-color: #EEEEEE;
		border-radius: 20rpx;
		height: 60rpx;
		padding-left: 20rpx;
		margin-left: -100rpx;
	}
	.inputBox input{
		width: 500rpx;
	}
	page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
